<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="js/jquery-3.1.1.js">
        
    </script>
    <style>
    
        ul,li,h4,p{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li{
            height: 40px;
            overflow: hidden;
            border-bottom: 1px dotted lightgray;
            line-height: 40px;
        }
        li:nth-of-type(1){
            height: 80px;
        }
        div{
            width: 720px;
            margin: 20px auto;
            border: 1px solid lightgray;
        }
        h4{
            width: 100px;
            text-align: right;
            display: inline-block;
            font-size: 14px;
        }
        p{
          width: 610px;
            float: right;
        }
        span{
            margin-right: 20px;
            color: mediumblue;
            font-size: 12px;
            cursor: pointer;
        }
        .dian span:hover{
            background-color: orangered;
            color: white;
        }
        .last span{
            color: black;
            padding: 5px;
            border:1px solid orangered;
            display: none;
        }
        small{
            color:gray;
            font-size: 15px;
        }
    .last .clear{
        border:none;
        color: orangered;
    }
    </style>
</head>
<body>
    <div>
    <ul>
        <li class="dian">
            <h4>品牌:</h4>
            <p>
                <span>苹果</span> <span>小米</span><span>华为</span><span>中兴</span><span>三星</span> <span>魅族</span> <span>酷派</span><span>小米</span><span>诺基亚</span> <span>小米</span><span>联想</span><span>小米</span><span>魅族</span><span>小米</span><span>酷派</span><span>小米</span><span>诺基亚</span> <span>小米</span><span>联想</span><span>小米</span><span>魅族</span><span>小米</span>
            </p>
        </li>
        <li  class="dian">
            <h4>价格:</h4>
            <p>
                <span>500元以下</span>
                <span>500-1000</span>
                <span>1000-1500</span>
                <span>1500-2000</span>
                <span>2000-2500</span>
                <span>2500-3000</span>
                <span>4000元以上</span>
            </p>
        </li>
        <li  class="dian">
            <h4>主屏尺寸:</h4>
            <p>
                <span>6.0英寸以上</span>
                <span>5.5-6.0英寸</span>
                <span>5.0-5.5英寸</span>
                <span>4.5-5.0英寸</span>
                <span>4.0-4.5英寸</span>
                <span>4.0英寸以下</span>
            </p>
        </li>
        <li  class="dian">
            <h4>网络:</h4>
            <p>
                <span>全网通</span>
                <span>双4G</span>
                <span>移动4G</span>
                <span>联通4G</span>
                <span>电信4G</span>
            </p>
        </li>
        <li  class="dian">
            <h4>核心数:</h4>
            <p>
                <span>十核</span>
                <span>八核</span>
                <span>双四核</span>
                <span>四核</span>
                <span>双核及以下</span>
            </p>
        </li>
        <li  class="dian">
            <h4>特性:</h4>
            <p>
                <span>大屏幕</span>
                <span>双卡双待</span>
                <span>指纹识别</span>
                <span>千元机</span>
                <span>拍照神器</span>
            </p>
        </li>
    <li class="last">
        <h4>你已选择:</h4>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="clear">清除筛选条件</span>
    </li>
    </ul>
    
    </div>
</body>
</html>
<script>

    $(function(){
        var n = 0;
        $('.dian').each(function(index){
            var num = index;
            $('span',this).each(function(){
                $(this).click(function(){
                    n++;
                    $($('.last span')[num]).show();
                    $($('.last span')[num]).html($(this).text()+'<small>&times;</small>')
                  if(n>=2){
                        $('.clear').show();
                  }
            })
            })
        })
        $('.last span').each(function(){
            
            $(this).click(function(){
                n--
                $(this).hide();
                if(n==1){
                    $('.clear').hide();
                }
            })
        })
        })
       $('.clear').click(function(){
           $(this).hide().siblings().hide();
           $('.last').find('h4').show();
       })
</script>